import React, {Component} from 'react';

class HotFlights extends Component {
    render() {
        const HotFlightTitles = ['熱門推薦', '亞洲', '中國', '長線'];
        let inputData = [{
            AreaType: 0,
            HotFlights: [{
                AirlineCode:"MF",
                AirlineZhName:"廈門航空",
                CurrencyCode:'HKD',
                FlightNumber:"MF8012",
                FromCity:"HKG",
                FromCityName:"香港",
                HKDPrice:2893,
                InboundDate:"2018-12-29 00:00:00",
                InboundDate: '12.29',
                IsTransit:false,
                OutboundDate:"2018-12-26 00:00:00",
                OutboundDate: '12.26',
                ToCity:"HGH",
                ToCityName:"杭州",
                Transit:"直飛",
            }]
        }];

        let fligths = [];
        inputData.map(item => {
            fligths = fligths.concat(item.HotFlights);
        });
        
        const HotFlightsHeader = props => {
            const items = props.hotFlightTitles.map((displayName, index) => {
                return (
                    <div key={index} className='hot-flights-title-item'>
                      <div>{displayName}</div>
                    </div>
                );
            });

            return <h6 className='hot-flight-list-head'>{items}</h6>;
        };

        const HotFlightsBody = props => {
            const items = props.hotFlights.map((item, index) => {
                return (
                    <div key={index} className='hot-flight-item'>
                        <div className='hot-flight-item-left'>
                          <div className='stroke-info'>
                            <div className='flight-city'>{item.FromCityName}</div>
                            <div className='flight-city'>{item.ToCityName}</div>
                          </div>
                          <div className='stroke-time'>
                            <div>{item.OutboundDate}</div>
                            <div>{item.InboundDate}</div>
                          </div>
                        </div>
                        <div className='hot-flight-item-right'>
                          <div className='air-fare'>
                            <div className='air-face-crrency-code'>{item.CurrencyCode}</div>
                            <div className='air-face-money'>{item.HKDPrice}</div>
                          </div>
                          <div className='air-company'>
                            {item.FlightNumber + item.AirlineZhName}
                          </div>
                        </div>
                    </div>
                    
                );
            });
            return <div className='hot-flight-item-list'>{items}</div>;
        }

        return (
            <div>
               <HotFlightsHeader hotFlightTitles={HotFlightTitles}/>
               <HotFlightsBody hotFlights={fligths}/>
            </div>
        );
    }
}

export default HotFlights;